<template>
    <div class="find-main">

        <banner-part bannerName="banner"></banner-part>

        <find-nav :navData="findNavData"></find-nav>

        <song-list :songListData="songListData">
            <template v-slot:titleText>
                推荐歌单
            </template>
        </song-list>

        <recommend-songs :songData="newSongList" v-on="$listeners">
            <template v-slot:titleText>
                <i class="iconfont icon-shunshizhenxuanzhuan"></i> 新歌推荐
            </template>
        </recommend-songs>
        <keep-alive include="musicRank">
            <music-rank>
                <template v-slot:titleText>
                    排行榜
                </template>
            </music-rank>
        </keep-alive>
    </div>
</template>

<script>
import bannerPart from "@/components/banner-part.vue"
import findNav from "@/components/find-nav.vue"
import findNavData from "@/data/find-nav.json"
import songList from "@/components/song-list.vue"
import recommendSongs from '@/components/recommend-songs.vue'
import musicRank from '@/components/music-rank.vue'
import loadingPart from '@/components/loading-part.vue'
import indexSearch from '@/components/index-search.vue'
export default {
    name : 'Find',
    created(){
        axios.defaults.withCredentials = true;
        axios.get("/api/personalized?limit=6").then(response => {
            response.data.result.forEach(item=>{
                this.songListData.push(item);
            });

        })
        axios.get("/api/personalized/newsong?limit=9").then(response=>{
            response.data.result.forEach(item=>{
                this.newSongList.push(item);
            });
        });

        axios.get("")

        
        // axios.interceptors.request.use( (config)=> {
        //     // 在发送请求之前做些什么
        //     this.isTrue = true;
        //     return config;
        // },  (error)=> {
        //     // 对请求错误做些什么
        //     return Promise.reject(error);
        // });

        // axios.interceptors.response.use( (response)=> {
        //     // 2xx 范围内的状态码都会触发该函数。
        //     // 对响应数据做点什么
        //     let time = null;
        //     clearTimeout(time);
        //     time = setTimeout(()=>{
        //         this.isTrue = false
        //     },500)
        //     return response;
        // }, (error)=> {
        //   // 超出 2xx 范围的状态码都会触发该函数。
        //   // 对响应错误做点什么
        //   return Promise.reject(error);
        // });
    
    },
    components:{
        bannerPart,
        findNav,
        songList,
        recommendSongs,
        musicRank,
        loadingPart,
        indexSearch
    },
    data(){
        return {
            findNavData,
            songListData : [],
            newSongList : [],
            isTrue : true,
        }
    },
    props : {

    }
}
</script>

<style lang="scss" scoped>
    .find-main {
        padding: 4rem 0rem;
    }

    .mask-leave-active {
      transition: opacity .5s;
    }
    .mask-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
</style>